<template>
  <div id="log">
    <van-cell-group :border="flag">
      <van-field
        :border="flag"
        v-model="username"
        clearable
        placeholder="请输入用户名/邮箱"
        clickable
        @touchstart.native.stop="show = true"
      />
      <van-field :border="flag" v-model="password" type="password" placeholder="请输入密码" />
    </van-cell-group>
    <van-button @click="load" type="primary" size="large" :color="genggai">登录</van-button>
    <p id="forgect">忘记密码</p>
  </div>
</template>

<script>
import * as api from "../api/User";
import { Dialog } from "vant";
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
      flag: false,
      show: false
    };
  },
  computed: {
    genggai: function() {
      if (this.username !== "" && this.password !== "") {
        return "#000000";
      } else {
        return "#d2d2d2";
      }
    }
  },
  methods: {
    load() {
      api.login({ uname: this.username, upwd: this.password }).then(data => {
        if (data.data.code == "400") {
          Dialog.alert({
            message: "用户名或者密码错误！"
          });
        } else {
          localStorage.setItem("token",data.data.result[0].uid)  
          this.$router.push("/index");
        }
      });
    }
  }
};
</script>

<style scoped>
#logo {
  margin-top: 157px;
  margin-bottom: 140px;
}
.van-cell {
  border-bottom: 1px solid #cccccc;
  height: 80px;
  line-height: 80px;
  font-size: 27px;
  padding: 0;
}
.van-button {
  margin-top: 81px;
  height: 89px;
  font-size: 28px;
}
#log {
  width: 579px;
  margin: 0 auto;
}
#forgect {
  float: right;
  color: #838383;
}
</style>